#{extends 'main.html' /}
#{set title:'Salao Tads' /}
#{stylesheet 'style.css'/}


<head>
<script> 
		funcionarios= new Array();	
		  	 
       function b(){  
	  aux= new Array();	
         var i = document.f.estado.selectedIndex;  
			aux.push(document.f.estado[i].text);  
			funcionarios.push(document.f.estado[i].value);        
		
						
       }  
	   function mostrar(){
	    
			document.f.campo.value += aux+=",";
		
			
	   }
	   function addhoras()
	   {
	
		   document.f.horas.value=funcionarios;

			   }
	  
    </script> 

</head>
<body>
<div id="Content"> <!--Container -->

	<div id="Header">
     
   		<div id="menuforms">
       
        <form name="f" action = "inserir_funcionario">
		<table>
<input type="hidden" name="f.tipo" value ="Funcionario"/>
<tr><td colspan="2">Cadastro de Funcionarios</td></tr>
<tr><td>Nome Completo</td><td><input type="text" name="f.nome" /></td></tr>
<tr><td>Endereço</td><td><input type="text" name="f.endereco" /></td></tr>
<tr><td>Telefone</td><td><input type="text" name="f.telefone" /></td></tr>
<tr><td>Cpf</td><td><input type="text" name="f.cpf" /></td></tr>
<tr><td>Função</td><td><input type="text" name="f.funcao" /></td></tr>
<tr><td>Salario</td><td><input type="text" name="f.salario" /></td></tr>
<tr><td>Login</td><td><input type="text" name="f.login" /></td></tr>
<tr><td>Senha</td><td><input type="password" name="f.senha" /></td></tr>
<tr><td >Selecionar</td><td>
<select name="estado"  onChange=" b() ; addhoras();mostrar()">
			<optgroup label="Horarios">
				<option>Horas</option>
				#{list items:hors, as:'p'}
					<option value="${p.id}">${p.hora}</option>
				#{/list}
			</optgroup>
		</select>

<td></tr>
<tr><td>Horarios Selecionados</td><td> <input type ="text" name="campo"/> <input type ="hidden" name="horas"/></td></tr>
<tr><td><input type="submit"  value ="Cadastrar"/></td>
<td>   <div id="footer">
 <li> 
   <div align="center"><a href="/secure/logout">Encerrar Sessao</a></div>
 </li> </td>
</tr>

 </table>
 
</form>
    
</div>    
     
 </div>

</body>
</html>